<template>
  <view class="card-wrapper">
    <scroll-view scroll-y style="height: 100%" @scrolltolower="onScrolltolower">
      <view class="card-item" v-for="(item, index) in ajaxData" :key="item.id">
        <view class="card-item-image">
          <uv-image :src="item.imagePath || defaultPropImg" height="100%" width="100%"></uv-image>
        </view>
        <view class="card-item-content">
          <view class="name">{{ item.name }}</view>
          <view class="common">
            <view class="common-label">有效时长</view>
            <view>{{ item.usefulMonth }}个月</view>
          </view>
          <view class="common">
            <view class="common-label">单月上限</view>
            <view>{{ item.monthly > 99999 ? '无上限' : item.monthly }}(去卡豆)</view>
          </view>
          <view class="common">
            <view class="common-label">总数</view>
            <view>{{ item.upperLimit > 99999 ? '无上限' : item.upperLimit }}(去卡豆)</view>
          </view>
          <view class="txt">
            <text class="txt-decimal">￥</text>
            <text>{{ item.inter }}</text>
            <text class="txt-decimal">.{{ item.decimal }}</text>
          </view>
          <button class="reset-button btn" @click="onPay(item)">购买</button>
        </view>
      </view>
      <view v-if="!ajaxData.length" class="empty-txt">---暂无数据---</view>
    </scroll-view>
  </view>
</template>

<script setup>
  import { ref, reactive } from 'vue';
  import { defaultPropImg } from '@/common/js/global.js';
  let ajaxData = ref([]);
  let params = ref({
    pageSize: 10,
    currentPage: 1
  });
  const httpList = async () => {
    let res = await uni.$uv.http.post('app/package_offer/list', params.value);
    ajaxData.value = res.map(r => {
      let arr = Number(r.amount / 100)
        .toFixed(2)
        .toString()
        .split('.');
      return {
        ...r,
        inter: arr[0],
        decimal: arr[1]
      };
    });
  };
  httpList();
  const onPay = val => {
    uni.$uv.route({
      url: '/pages/prop/pay',
      params: {
        id: val.id
      }
    });
  };
</script>

<style lang="scss" scoped>
  .card-wrapper {
    padding: 26rpx 10rpx 0;
    height: 100%;
    .card-item {
      padding: 44rpx 0;
      margin-bottom: 17rpx;
      color: #b1b1b1;
      border-bottom: 1px dashed #b1b1b1;
      display: flex;
      &-image {
        overflow: hidden;
        width: 262rpx;
        height: 326rpx;
        border-radius: 19rpx;
        background-color: #c4c4c4;
      }
      &-content {
        margin-left: 80rpx;
        .name {
          font-size: 35rpx;
          color: #fff;
          font-weight: bold;
          margin-bottom: 30rpx;
        }
        .common {
          margin-top: 7rpx;
          display: flex;
          align-items: center;
          font-size: 24rpx;
          &-label {
            width: 122rpx;
          }
        }
        .txt {
          margin-top: 17rpx;
          font-size: 63rpx;
          font-weight: bold;
          color: #ffcb68;
          &-decimal {
            font-weight: 200;
            font-size: 42rpx;
          }
        }
        .btn {
          margin-top: 51rpx;
          width: 298rpx;
          height: 70rpx;
          line-height: 70rpx;
          text-align: center;
          color: #fff;
          border-radius: 78rpx;
          background-color: #ff7a66;
          box-shadow: 0rpx 0rpx 7rpx 0rpx rgba(0, 0, 0, 0.25);
          font-size: 35rpx;
          font-weight: bold;
        }
      }
    }
    .empty-txt {
      color: #cecece;
      text-align: center;
      margin-top: 20rpx;
    }
  }
</style>
